// 创建一个新的 Vue 应用
const app = Vue.createApp({
  // data() 函数返回一个对象，这个对象包含了我们应用所有的数据
  data() {
    return {
      // 这是我们任务看板的核心数据
      lists: [
        {
          title: '待办',
          cards: [
            { id: 1, text: '任务一：学习HTML' },
            { id: 2, text: '任务二：学习CSS' }
          ]
        },
        {
          title: '进行中',
          cards: [
            { id: 3, text: '任务三：完成任务看板项目' }
          ]
        },
        {
          title: '已完成',
          cards: [
            { id: 4, text: '任务四：Vue基础入门' }
          ]
        },
        {
          title: '暂缓',
          cards: []
        }
      ]
    }
  },
  methods:{
    onDragStart(event, listIndex, cardIndex) {
      console.log('开始拖动!');
      console.log(`来自列表: ${listIndex}, 卡片位置: ${cardIndex}`);

      // 使用浏览器的 dataTransfer API 来存储信息
      // 我们把列表索引和卡片索引存起来，以便在放置时使用
      event.dataTransfer.setData('text/plain', JSON.stringify({ listIndex, cardIndex }));
    },
    onListDrop(event, toListIndex) {
      // 取回我们在 onDragStart 时存储的数据
      const data = JSON.parse(event.dataTransfer.getData('text/plain'));
      const fromListIndex = data.listIndex;
      const fromCardIndex = data.cardIndex;

      console.log(`卡片从列表 ${fromListIndex} 的位置 ${fromCardIndex} 被放到了列表 ${toListIndex} 中`);

      // 1. 从原列表中移除卡片，并用一个变量把它存起来
      // .splice() 返回的是一个数组，所以我们用 [0] 来获取那个被移除的卡片对象
      const movedCard = this.lists[fromListIndex].cards.splice(fromCardIndex, 1)[0];

      // 2. 将这个卡片对象添加到目标列表中
      this.lists[toListIndex].cards.push(movedCard);
    },
    // 这是我们处理精准放置的新方法
    onCardDrop(event, toListIndex, toCardIndex) {
      console.log(`准备把卡片放到列表 ${toListIndex} 的位置 ${toCardIndex} 前面`);

      // 1. 获取拖拽的源卡片信息
      const fromData = JSON.parse(event.dataTransfer.getData('text/plain'));

      // 2. 从原数组中移除该卡片
      const cardToMove = this.lists[fromData.listIndex].cards.splice(fromData.cardIndex, 1)[0];
      // 解决在同一个列表里向下拖拽时的 index 偏移问题
      if (fromData.listIndex === toListIndex && fromData.cardIndex < toCardIndex) {
        // 如果是在同一个列表里，
        // 并且，我们是从一个较低的位置(fromCardIndex)拖到一个较高的位置(toCardIndex)
        // 那么，因为我们先用 splice 移除了一个元素，会导致目标位置的 index 需要减 1 来校准
        toCardIndex--;
      }
      // 3. 使用 splice 将其插入到新位置
      this.lists[toListIndex].cards.splice(toCardIndex, 0, cardToMove);
    }
  }
});

// 将 Vue 应用挂载到 HTML 中 id 为 "app" 的元素上
app.mount('#app');
